<template>
  <div class="list-wrap">
    <div class="list-item" v-for="(item,index) in 10" :key="index">
      <img src="@assets/images/cs.png" alt="" class="list-item-img">
      <div class="list-item-data">
        <p class="list-item-data-name">沃尔玛</p>
        <p class="list-item-data-wrap">
            <span>月售1万+</span>
            <span>起送¥0</span>
            <span>基础运费¥5</span>
        </p>
        <p class="list-item-data-tip">VIP尊享满89元减4元运费券（每月3张）VIP尊享满89元减4元运费券（每月3张）VIP尊享满89元减4元运费券（每月3张）</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@assets/css/variable.scss';
.list-wrap {
  margin-top: 10px;
  padding: 0 18px;
  .list-item {
    display: flex;
    margin-bottom: 12px;
    &-img {
      width: 56px;
      height: 55px;
    }
    &-data {
      flex-grow: 1;
      border-bottom: 1px solid #f1f1f1;
      margin-left: 16px;
      padding-bottom: 12px;
      overflow: hidden;
      &-name {
        font-family: PingFangSC-Regular;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
      }
      &-wrap {
        margin-top: 8px;
        font-size: 13px;
        span {
          margin-right: 16px;
        }
      }
      &-tip {
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #E93B3B;
        margin-top: 8px;
        @include text_over;
      }
    }
  }
  .list-item:last-of-type {
    margin-bottom: 0;
  }
}
</style>
